<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:fmt="http://java.sun.com/jsp/jstl/fmt">
<head>
    <meta charset="UTF-8">
    <title>PetStore Management</title>
<!--    <link rel="Stylesheet" href="../css/jpetstore.css" type="text/css" media="screen"/>-->
    <script th:src="@{../js/jquery-3.5.1.min.js}"></script>
</head>
<style>
    *{
        padding: 0px;
        margin: 0px;
    }
    h3{
        float: left;
        position: absolute;
        top: 1ex;
        left: 73ex;
    }
    #Content {
        width: 100%;
        height: 110ex;
        color: #333;
        background-color: rgba(256,256,256,0.5);
        border-width: 0;
        position: relative;
        overflow: hidden;
    }
    #Catalog{
        display: block;
        margin-top: 3%;
        margin-left: 30%;
        width: 80ex;
        height: 80ex;
        font-size: 2ex;
        background-color:rgba(256,256,256,0);
        margin-bottom: 10ex;
    }
    .Returnto{
        display: inline-block;
        float: left;
        position: absolute;
        top: 0ex;
        left: 2ex;
        height: 5ex;
        width: 50ex;
        background-image: url("../image/ReturntoManagementMainMenu.png");
        background-size: 100%;
        background-repeat: no-repeat;
        border-color: #eaac00;
        border-width: 0.4ex;
        border-style: solid;
    }
    .table1{
        display: block;
        position: absolute;
        top: -15ex;
        left: 10ex;
        margin-top: 10%;
        margin-left: 32%;
        width: 45ex;
        background-color: #ffffff;
        border-color: #56832c;
        border-width: 1ex;
        border-style: solid;
        margin-bottom: 10ex;
    }
    .table1 tr{
        height: 3ex;
        text-align: left;
    }
    .table1 td{
        width: 10ex;
    }
.but{
    display: inline-block;
    position: absolute;
    border-color: #eaac00;
    border-width: 0.4ex;
    border-style: solid;
    width: 10ex;
    height: 4ex;
    font-size: 3ex;
    color: #eaac00;
}


</style>
<body>
<div th:replace="manageCommon/managetop"></div>
<div id="Content">
    <a class="Returnto" href="/manage/main"></a>
    <div id="QuickLinks">
    </div>
    <div id="Catalog">
        <form action="" method="post" id="ordering">
            <h3>Order Information</h3>
            <table class="table1">
                <tr>
                    <td>Order ID:</td>
                    <td th:text="${session.orderInfo.orderId}" id="orderid">订单号</td>
                </tr>
                <tr>
                    <th colspan="2">Payment Details</th>
                </tr>
                <tr>
                    <td>Card Type:</td>
                    <td><input type="text" name="cardType" id="cardType" th:value="${session.orderInfo.cardType}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Card Number:</td>
                    <td><input type="text" name="creditCard" id="creditCard" th:value="${session.orderInfo.creditCard}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Expiry Date (MM/YYYY):</td>
                    <td th:text="${session.orderInfo.expiryDate}"></td>
                </tr>
                <tr>
                    <th colspan="2">Billing Address</th>
                </tr>
                <tr>
                    <td>First name:</td>
                    <td><input type="text" name="billToFirstName" id="billToFirstName" th:value="${session.orderInfo.billToFirstName}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td><input type="text" name="billToLastName" id="billToLastName" th:value="${session.orderInfo.billToLastName}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td><input type="text" name="billAddress1" id="billAddress1" th:value="${session.orderInfo.billAddress1}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td><input type="text" name="billAddress2" id="billAddress2" th:value="${session.orderInfo.billAddress2}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td><input type="text" name="billCity" id="billCity" th:value="${session.orderInfo.billCity}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td><input type="text" name="billState" id="billState" th:value="${session.orderInfo.billState}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td><input type="text" name="billZip" id="billZip" th:value="${session.orderInfo.billZip}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td><input type="text" name="billCountry" id="billCountry" th:value="${session.orderInfo.billCountry}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <th colspan="2">Shipping Address</th>
                </tr>
                <tr>
                    <td>First name:</td>
                    <td><input type="text" name="shipToFirstName" id="shipToFirstName" th:value="${session.orderInfo.shipToFirstName}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td><input type="text" name="shipToLastName" id="shipToLastName" th:value="${session.orderInfo.shipToLastName}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td><input type="text" size="25" name="shipAddress1" id="shipAddress1" th:value="${session.orderInfo.shipAddress1}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td><input type="text" size="25" name="shipAddress2" id="shipAddress2" th:value="${session.orderInfo.shipAddress2}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td><input type="text" name="shipCity"  th:value="${session.orderInfo.shipCity}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td><input type="text" size="4" name="shipState"  th:value="${session.orderInfo.shipState}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td><input type="text" size="10" name="shipZip"  th:value="${session.orderInfo.shipZip}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td><input type="text" size="15" name="shipCountry"  th:value="${session.orderInfo.shipCountry}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Courier:</td>
                    <td><input type="text" name="courier" id="courier" th:value="${session.orderInfo.courier}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Status: </td>
                    <td th:text="${session.orderInfo.status}"></td>
                </tr>
                <tr>
                    <td colspan="2">

                        <table>
                            <tr>
                                <th>Item ID</th>
                                <th>Description</th>
                                <th>Quantity</th>
                                <th>Price</th>
                                <th>Total Cost</th>
                            </tr>
                            <tr th:each="lineItem:${session.orderInfo.lineItems}">
                                <td th:text="${lineItem.item.itemId}"></td>
                                <td th:if="${lineItem.item != null}" th:text="${lineItem.item.attribute1!=null?lineItem.item.attribute1:''}+' '+${lineItem.item.attribute2!=null?lineItem.item.attribute2:''}+' '+${lineItem.item.attribute3!=null?lineItem.item.attribute3:''}+' '+${lineItem.item.attribute4!=null?lineItem.item.attribute4:''}+' '+${lineItem.item.attribute5!=null?lineItem.item.attribute5:''}+' '+${lineItem.item.product.name}">
                                </td>
                                <td th:if="${lineItem.item == null}">
                                    <i>{description unavailable}</i>
                                </td>

                                <td th:text="${lineItem.quantity}"></td>

                                <td><fmt:formatNumber th:text="${'$'+#numbers.formatDecimal(lineItem.unitPrice,0,'COMMA',2,'POINT')}" /></td>

                            </tr>
                            <tr>
                                <th colspan="5">
                                    Total: <fmt:formatNumber th:text="${'$'+#numbers.formatDecimal(session.orderInfo.totalPrice,0,'COMMA',2,'POINT')}" />
                                </th>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </form>
        <input class="but" id="edit" type="button" value="Edit" style="display:inline-block;top: 5ex;left: 2ex" th:onclick="revise()"/>
        <input class="but" id="save" type="button" value="Save" style="display:none;top: 10ex;left: 2ex" th:onclick="save()" />
        <input class="but" id="return" type="button" value="Return" style="top: 15ex;left: 2ex" th:onclick="returnOrderList()"/>
        <input class="but" id="refund" type="button" value="Refund" style="top: 20ex;left: 2ex" th:onclick="WhetherRefund()"/>
        <input class="but" id="deliver" type="button" value="Deliver" style="top: 25ex;left: 2ex" th:onclick="WhetherDeliver()"/>
        <input class="but" id="confirm" type="button" value="Confirm" style="display:none;top: 30ex;left: 2ex" th:onclick="reFund()"/>
        <input class="but" id="cancel" type="button" value="Cancel" style="display:none;top: 35ex;left: 2ex" th:onclick="Cancel()"/>
        <script>
            // 设置页面可编辑
            function undisabled(){
                var form = document.getElementById("ordering");
                var input = form.getElementsByTagName("input");
                for(var i = 0 ;i <input.length;i++){
                    input[i].disabled = false;
                }
                var select = form.getElementsByTagName("select");
                for(var j = 0;j<select.length;j++){
                    select[j].disabled = false;
                }
            }
            function indisabled(){
                var form = document.getElementById("ordering");
                var input = form.getElementsByTagName("input");
                for(var i = 0 ;i <input.length;i++){
                    input[i].disabled = true;
                }
                var select = form.getElementsByTagName("select");
                for(var j = 0;j<select.length;j++){
                    select[j].disabled = true;
                }
            }
            function revise(){
                undisabled();
                document.getElementById("edit").style.display = "none";
                document.getElementById("save").style.display = "block";
            }
            function save(){
                let datas = $('#ordering').serialize();
                $.post('/manage/saveOrderInfo',datas,function (data) {
                    console.log("保存订单");
                    if(data.code===1){
                        console.log("修改成功")
                        indisabled();
                        document.getElementById("edit").style.display = "block";
                        document.getElementById("save").style.display = "none";
                    }
                });
            }
            function returnOrderList(){
                location.href = "/manage/ordermanagement";
            }
            function WhetherRefund(){
                document.getElementById("refund").style.display="none";
                document.getElementById("confirm").style.display="block";
                document.getElementById("cancel").style.display="block";
            }
            function Cancel(){
                document.getElementById("deliver").style.display="block";
                document.getElementById("refund").style.display="block";
                document.getElementById("confirm").style.display="none";
                document.getElementById("cancel").style.display="none";
            }
            function reFund(){
                location.href="/manage/reFundOrder?orderId="+document.getElementById("orderid").textContent;
            }
            function WhetherDeliver(){
                document.getElementById("deliver").style.display="none";
                document.getElementById("confirm").style.display="block";
                document.getElementById("cancel").style.display="block";
            }
            function operateAlert(){
                alert("请选择一个订单后进行操作！");
            }
        </script>
    </div>
</div>
<div th:replace="manageCommon/managebottom"></div>
</body>
</html>